<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>189000503左香菊</title>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("注册成功!");
    }
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
	    rules: {
	      username: {
	        required: true,
	        minlength: 2
	      },
	      password: {
	        required: true,
	        minlength: 5
	      },
	      confirm_password: {
	        required: true,
	        minlength: 5,
	        equalTo: "#password"
	      },
	      tel: {  
	            required : true,  
	            minlength : 11, 
	            isMobile : true  
	        		}, 
	          },
        messages: {
          new_phone : {  
              required : "请输入手机号",  
              minlength : "不能小于11个字符",  
              isMobile : "请正确填写手机号码"  
           },

	      agree: "required"
	    },
	    messages: {
	      username: {
	        required: "请输入用户名",
	        minlength: "用户名必需由两个字母组成"
	      },
	      password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母"
	      },
	      confirm_password: {
	        required: "请输入密码",
	        minlength: "密码长度不能小于 5 个字母",
	        equalTo: "两次密码输入不一致"
	      },
	      email: "请输入一个正确的邮箱",
	      agree: "请接受我们的声明",
	    }
	});
  //验证码 
  var code; 
      function createCode(){ 
        code = '';//首先默认code为空字符串 
        var codeLength = 4;//设置长度，这里看需求，我这里设置了4 
        var codeV = $("div"); 
        //设置随机字符 
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'); 
        for(var i = 0; i < codeLength; i++){ //循环codeLength 我设置的4就是循环4次   
           var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36  
           code += random[index]; //字符串拼接 将每次随机的字符 进行拼接 
      } 
        codeV.text(code);//将拼接好的字符串赋值给展示的Value 
      } 
      //页面开始加载验证码 
      createCode(); 
      //验证码Div加载点击事件 
      $("div").bind('click',function() { 
          createCode(); 
        }); 
      //下面就是判断是否==的代码，无需解释 
      $("#b1").bind('click',function() { 
         var oValue = $("#in1").val().toUpperCase(); 
         $("#l1").html(""); 
        if(oValue ==""){ 
          $("#l1").html("<font color='red'>请输入验证码</font>"); 
        }else if(oValue != code){ 
          $("#l1").html("<font color='red'>验证码不正确，请重新输入</font>"); 
          oValue = ""; 
          createCode(); 
        }else{ 
          $("#l1").html("<font color='blue'>验证码正确</font>"); 
        } 
      });  
});
    //手机号的验证规则
    jQuery.validator.addMethod("isMobile", function(value, element) {  
    var length = value.length;  
    var mobile = /^(1[3-9][0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
    return this.optional(element) || (length == 11 && mobile.test(value));  
    }, "请正确填写手机号码"); 

</script>
<style>
.error{
	color:red;
}
#div{
  background-color: blue; width: 100px; text-align: center;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text" placeholder="请输入用户名">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password" placeholder="">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password" placeholder="再次输入密码">
    </p>
    <p>
      <label for="tel">电话</label>
      <input id="tel" name="tel" type="tel" placeholder="建议使用常用手机号码">
    </p>
    <p>
      <label>验证码</label>
      <input type="text" id="in1" value="" placeholder="请输入验证码"> 
      <div></div><label id="l1"></label>
      <button id="b1">点击验证</button>
    </p>
    <p>
      <label for="agree">阅读并同意</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
   
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>